<template>
    <div class="height-100b position-relative">
         <div v-if="countShow">
            <div style="color: #fff;">
                留言 {{data.length}}
            </div>
            <div style="width: 100%;background-color: #2b283b;height: 1px;margin: 10px 0;"></div>
         </div>
        <template v-if="inited">
            <div class="comment-list" v-show="data.length>0">
                <div :class="{'mt-10':index>0}" :key="index" v-for="(item,index) in data">
                    <item :info="item" @replyUser="replyUser"></item>
                </div>
            </div>
            <div class="flex jus-center align-center flex-dre-column" style="padding-top:10vh" v-show="data.length==0">
                <el-image :src="empty_icon" fit="cover" style="width: 8vw; height: 8vw"></el-image>
                <div class="color-fff font-14">还没有相关留言</div>
            </div>
            <div class="position-absolute fiexd-input">
                <input :class="{'reply-input':reply_with!=null}" :maxlength="200" :placeholder="reply_with==null ? '说点什么吧' : '请输入回复内容'" @keydown="handleBackspace" class="my-input text-indent-10" type="text" v-model="content" />
                <el-button :loading="button_loading" @click="comment" round size="small">发送</el-button>
                <div style="position: absolute;top: 0px;line-height: 4.4vh;overflow: hidden;background:#272337;border-top-left-radius: 25px;border-bottom-left-radius: 25px;font-size:1.6vh" v-if="reply_with!=null">
                    <span class="pl-5 pr-5">回复</span>
                    <span>{{reply_with.user.name}}：</span>
                </div>
                <!-- <div v-if="reply_with!=null">
					<span class="pl-5 pr-5">回复</span>
					<span>{{reply_with.name}}：</span>
                </div>-->
                <!-- <el-input :maxlength="300" :class="{'reply-input':reply_with!=null}" @keydown="handleBackspace" :placeholder="reply_with==null ? '说点什么吧' : '请输入回复内容'" style="background:#272337;border-radius:25px;border:none" v-model="content">
                    <template #prefix>
                    </template>
                </el-input>-->
            </div>
        </template>
        <div v-else>
            <div class="flex jus-center align-center flex-dre-column" style="padding-top:20vh">
                <el-image :src="init_loading" fit="cover" style="width: 6vw; height: 3vw"></el-image>
            </div>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
import item from './item.vue'
export default {
    components: {
        item,
    },
    props: {
        creation: {
            type: Object,
            default() {
                return {}
            },
        },
        countShow:{
            type: Boolean,
            default() {
                return false
                
            },
        }
    },
    mixins: [pageTool],
    data() {
        return {
            data: [],
            query: {
                creation_id: null,
            },
            content: '',
            empty_icon: require('@/assets/image/comment/empty.png'),
            init_loading: require('@/assets/gif/re-video-loading.gif'),
            inited: false,
            button_loading: false,
            reply_with: null,
        }
    },
    methods: {
        beforeInit(e) {
            this.query.creation_id = this.creation.creation_id
            if(e){
                this.query.creation_id = e
            }
            this.query.page = 1
            this.url = '/creation-comment/index'
            this.append = true
            this.init()
                .then(() => {})
                .catch(() => {})
                .finally(() => {
                    this.inited = true
                })
        },
        send() {},
        replyUser(info) {
            this.reply_with = info
        },
        comment() {
            if (this.content == '') {
                this.$message({
                    message: '请输入内容',
                    type: 'warning',
                })
                return false
            }
            this.button_loading = true
            if (this.reply_with) {
                let param = {
                    comment_id: this.reply_with.comment_id,
                    message: this.content,
                }
                this.$request
                    .post('/creation-comment/replay', param)
                    .then((res) => {
                        this.content = ''
                        this.reply_with = null
                        this.init()
                    })
                    .catch((err) => {
                        console.log(err, 'err')
                    })
                    .finally(() => {
                        this.button_loading = false
                    })
            } else {
                let param = {
                    creation_id: this.creation.creation_id,
                    message: this.content,
                }
                this.$request
                    .post('/creation-comment/create', param)
                    .then((res) => {
                        this.data.push(res)
                        this.content = ''
                        this.reply_with = null
                    })
                    .catch((err) => {
                        console.log(err, 'err')
                    })
                    .finally(() => {
                        this.button_loading = false
                    })
            }
        },
        handleBackspace(event) {
            if (event.keyCode === 8) {
                if (this.content == '') {
                    this.reply_with = null
                }
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.fiexd-input {
    bottom: 0.5vh;
    width: 100%;
}
/deep/.my-input {
    border: none;
    color: #f3f3f3;
    background: #272337;
    width: calc(100% - 4.5vw);
    // margin-left: 30px;
    height: 4.4vh;
    border-radius: 4vh;
    outline: none;
    padding-right: 70px;
    padding-block: 0;
    padding-inline: 0;
    text-indent: 1vw;
    z-index: 1;
    font-size: 1.7vh;
}
/deep/.el-button--small.is-round {
    margin-top: 3px;
    background: #403a57;
    border: none;
    color: #fff;
    // padding: 11px 16px;
    font-size: 1.6vh;
    position: absolute;
    top: -2px;
    right: 1px;
    width: 4vw;
    height: 4vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.comment-list {
    height: calc(100% - 50px);
    overflow-y: scroll;
}
.comment-list::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
}
/deep/.el-input__prefix {
    line-height: 40px;
}
/deep/.reply-input {
    text-indent: 10vh !important;
}
.text-indent-10 {
    // text-indent: 10px;
}
</style>